<template>
  <div class="app-container">

    <el-row :gutter="24" style="margin-top: 50px">
      <div style="text-align: center; margin-bottom: 20px">
        <h2 class="text-center">{{ source }}结果</h2>
        <p style="font-size: 12px;color:#dd6572; margin-top: 10px">你可以根据各个题目的建议和选项说明来判断你的测试结果，必要时请咨询专业人士(你填的选项超过60%是正常选项，则说明你没有心理问题，否则请及时咨询专业人士)</p>
      </div>
    </el-row>
    <el-card style="margin-top: 20px">
      <div style="margin-bottom: 20px">
        <h5>一、选择题</h5>
      </div>
      <div v-for="item in multi" :key="item.questionId" class="qu-content">
        <p style="margin-top: 5px">{{ item.questionId}}.{{ item.question }}</p>
        <div style="margin-top: 10px">
          <el-radio  :label="item.answerA"  v-model="item.rightAnswer" >
            A.{{ item.answerA }}
          </el-radio>
          <el-radio :label="item.answerB" v-model="item.rightAnswer">
            B.{{ item.answerB }}
          </el-radio>
          <el-radio :label="item.answerC" v-model="item.rightAnswer">
            C.{{ item.answerC }}
          </el-radio>
          <el-radio :label="item.answerD" v-model="item.rightAnswer">
            D.{{ item.answerD }}
          </el-radio>
          <div style="margin-top: 10px">
            <p style="font-size: 14px; color: #FDC8C8">建议或选项说明:</p>
            <p style="font-size: 12px;color: #dd6572"> {{ item.analysis }}</p>
          </div>
        </div>
      </div>


      <div style="margin: 20px 0px">
        <h5>二、判断题</h5>
      </div>
      <div v-for="item in judge" :key="item.questionId" class="qu-content">
        <p style="margin-top: 5px">{{ item.questionId}}.{{ item.question }}</p>
        <div style="margin-top: 10px">
          <el-radio  label="T"  v-model="item.answer" >
            是
          </el-radio>
          <el-radio label="F" v-model="item.answer">
            否
          </el-radio>
          <div style="margin-top: 10px">
            <p style="font-size: 14px; color: #FDC8C8">建议或选项说明:</p>
            <p style="font-size: 12px;color: #dd6572"> {{ item.analysis }}</p>
          </div>
        </div>
      </div>

      <div style="margin: 20px 0px">
        <h5>三、简答题</h5>
      </div>
      <div v-for="item in fill" :key="item.questionId" class="qu-content">
        <p style="margin-top: 5px">{{ item.questionId}}.{{ item.question }}</p>
        <div style="margin-top: 10px">
          <p>{{ item.answer }}</p>
        </div>
        <div style="margin-top: 10px">
          <p style="font-size: 14px; color: #FDC8C8">建议或选项说明:</p>
          <p style="font-size: 12px;color: #dd6572"> {{ item.analysis }}</p>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
export default {
  data() {
    return {
      isTransition: false, //是否渲染完成
      score: 0, //总分
      imgShow: false, //不及格图片显示

      startTime: null, //考试开始时间
      endTime: null, //考试结束时间
      eid:'',
      source:'',
      // 试卷ID
      paperId : '' ,
      paperData : {
        quList : []
      } ,
      form : {} ,
      radioValues : {} ,
      multiValues : {} ,
      radioRights : {} ,
      multiRights : {} ,
      myRadio : {} ,
      myMulti : {} ,
      multi : [] ,
      fill : [] ,
      judge : [] ,
      topic : {},
      userInfo : { //用户信息
        name : null ,
        id : null
      } ,

    }
  },
  created() {
    this.transiton()
    this.getScore()
    this.getCookies()
    this.getEvalation()
  },
  methods: {
    transiton() {  //一秒后过渡
      setTimeout(() => {
        this.isTransition = true
        this.imgShow = true
      },1000)
    },
    getScore() {
      let source = this.$route.query.source
      this.eid = this.$route.query.eid
      this.source = source
    },
    getCookies () {  //获取cookie
      this.userInfo.name = this.$cookies.get ( "cname" )
      this.userInfo.id = this.$cookies.get ( "cid" )
    } ,
    getEvalation(){
      this.$axios ( `/api/evaluation/${ this.eid }` ).then ( res => {
        this.topic = { ... res.data }
        this.multi = this.topic.multi
        this.fill = this.topic.fill
        this.judge = this.topic.judge
      } )
    },

    fetchData ( id ) {
      const params = { id : id }
      paperResult ( params ).then ( response => {
        // 试卷内容
        this.paperData = response.data
        // 填充该题目的答案
        this.paperData.quList.forEach ( ( item ) => {
          let radioValue = ''
          let radioRight = ''
          let myRadio = ''
          const multiValue = []
          const multiRight = []
          const myMulti = []

          item.answerList.forEach ( ( an ) => {
            // 用户选定的
            if ( an.checked ) {
              if ( item.quType === 1 || item.quType === 3 ) {
                radioValue = an.id
                myRadio = an.abc
              } else {
                multiValue.push ( an.id )
                myMulti.push ( an.abc )
              }
            }

            // 正确答案
            if ( an.isRight ) {
              if ( item.quType === 1 || item.quType === 3 ) {
                radioRight = an.abc
              } else {
                multiRight.push ( an.abc )
              }
            }
          } )

          this.multiValues[ item.id ] = multiValue
          this.radioValues[ item.id ] = radioValue

          this.radioRights[ item.id ] = radioRight
          this.multiRights[ item.id ] = multiRight

          this.myRadio[ item.id ] = myRadio
          this.myMulti[ item.id ] = myMulti
        } )

        console.log ( this.multiValues )
        console.log ( this.radioValues )
      } )
    } ,

    // 查询试卷信息
    getPaper ( id ) {
      this.$axios ( `/api/exam/${ id }` ).then ( res => { //根据试卷id请求后台
        if ( res.data.code == 200 ) {
          this.form = res.data.data
          console.log ( this.form )
        }
      } )
    }
  }
}
</script>

<style scoped>

  .qu-content{

    border-bottom: #eee 1px solid;
    padding-bottom: 10px;

  }

  .qu-content div{
    line-height: 30px;
  }

  .el-checkbox-group label,.el-radio-group label{
    width: 100%;
  }

  .card-title{
    background: #eee;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
  }
  .card-line{
    padding-left: 10px
  }
  .card-line span {
    cursor: pointer;
    margin: 2px;
  }
  .app-container{
    width: 85%;
    margin: 0 auto;
  }

</style>

